<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>

<html>
<head>
    <title>仓库</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">
                    <form-item label="名称:">
                        <i-input type="text" v-model="cangKuVo.name"/>
                    </form-item>
                    <form-item label="地址:">
                        <i-input type="text" v-model="cangKuVo.address"/>
                    </form-item>
                    <form-item label="库管员:">
                        <i-select v-model="cangKuVo.userId" style="width: 110px" filterable>
                            <i-option value="">--不限--</i-option>
                            <i-Option v-for="item in userList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                        </i-select>
                    </form-item>
                    <i-button type="primary"icon="ios-search" style="margin-left:20px" @click="pageNo=1;searchCangKuList();">搜索</i-button>
                    <i-button type="success"icon="md-sync" @click="cangKuVo={};searchCangKuList();pageNo=1"></i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <card>
        <shiro:hasPermission name="ck:add">
            <i-button type="success"@click="toAdd" icon="md-add">添加仓库</i-button>
        </shiro:hasPermission>
    </card>

    <i-table :columns="columns" :data="pageResult.rows" :height="300" border stripe  @on-selection-change="tableSelection=arguments[0]">

        <template slot-scope="{row}" slot="username">
             <span>{{ row.user.username}}</span>
        </template>

        <template slot-scope="{row,index}"  slot="action">
            <shiro:hasPermission name="ck:update">
                <i-button type="warning" @click="toUpdate(row)" size="small">修 改</i-button>
            </shiro:hasPermission>
            <shiro:hasPermission name="ck:del">
                <i-button type="error" @click="del(row,index)" size="small">删 除</i-button>
            </shiro:hasPermission>
            <!--    <shiro:hasPermission name="sp:upload">
                <i-button type="info" size="small" @click="toUpload(row)">上传工作照</i-button>
            </shiro:hasPermission>-->
        </template>
    </i-table>

    <modal v-model="updateFlag" title="修改仓库" @on-ok="update">
        <i-form ref="cangku1" :model="cangku" :label-width="80" style="padding: 30px" >
            <form-item label="名称"prop="cangkuName">
                <i-input v-model="cangku.cangkuName" size="large"/>
            </form-item>
            <form-item label="地址"prop="cangkuAddress">
                <i-input v-model="cangku.cangkuAddress" size="large"/>
            </form-item>
            <form-item label="电话"prop="cangkuPhone">
                <i-input v-model="cangku.cangkuPhone" size="large"/>
            </form-item>
            <form-item label="库管员:"prop="userId">
                <i-select  v-model="cangku.userId" style="width: 110px" filterable>
                    <i-Option v-for="item in userList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                </i-select>
            </form-item>
        </i-form>
    </modal>
    <modal v-model="addFlag" title="添加仓库" >
        <i-form ref="cangku" :model="cangku" :label-width="80" style="padding: 30px" :rules="ruleValidate">
            <form-item label="名称"prop="cangkuName">
                <i-input v-model="cangku.cangkuName" size="large"/>
            </form-item>
            <form-item label="地址"prop="cangkuAddress">
                <i-input v-model="cangku.cangkuAddress" size="large"/>
            </form-item>
            <form-item label="电话"prop="cangkuPhone">
                <i-input v-model="cangku.cangkuPhone" size="large"/>
            </form-item>
            <form-item label="库管员:"prop="userId">
                <i-select  v-model="cangku.userId" style="width: 110px" filterable>
                    <i-Option v-for="item in userList" :value="item.id" :key="item.id">{{item.username}}</i-Option>
                </i-select>
            </form-item>
            <i-button  type="primary" @click="add('cangku')" style="margin-left: 300px">提交</i-button>
            <i-button  type="error" @click="cancleSubmit('cangku')" >取消</i-button>
        </i-form>
        <div slot="footer"></div>
    </modal>
    <%--<Page :total="pageResult.total" :page-size="pageSize" @on-change="changePageNo"/>--%>
    <Page :total="pageResult.total"
          :page-size="pageSize"
    <%-- :current.sync="pageNo"--%>
          @on-change="pageNo=arguments[0];searchCangKuList();"
    <%--:current.sync="pageNo"-->
<%-- @on-change="searchUserList"--%>

          show-sizer
          :page-size-opts="[3,6,9]"
    <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];searchCangKuList();"
    />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                //{type:"selection",width:60,align:"center"},
                {key:"id",title:"编号",width:60,align:"center"},
                {key:"cangkuName",title:"仓库名称",align:"center"},
                {key:"cangkuAddress",title:"地址",align:"center"},
                {slot:"username",title:"库管员",align:"center"},
                {key:"cangkuPhone",title:"电话",align:"center"},
                {title:"操作",slot:"action",align:"center"}
            ],
            pageResult:{
                rows:[],
                total:50,
            },
            cangKuVo:{},
            userList:[],
            cangku:{},
            tableSelection:[],
            pageNo:1,
            pageSize:3,
            //uploadFlag:false,
            updateFlag:false,
            addFlag:false,
            ruleValidate: {
                cangkuName: [
                    {required: true, message: '请输入仓库名', trigger: 'blur'}
                ],
                cangkuAddress: [
                    {required: true, message: '请输入仓库地址', trigger: 'blur'}
                ],
                cangkuPhone: [
                    {required: true, message: '请输入仓库电话',trigger: 'blur'},
                    { type: 'number', message: '请输入正确的电话号码', trigger: 'blur',transform:(value) => Number(value)}
                    ,],
                userId: [
                    {required: true, type:'number', message: '请选择库管员', trigger: 'change'}
                ],
            },
            /*   uploadForm:{
                   id:null,
                   attachPath:null,
                   attachDescr:null,
               },
               img:null*/
        },
        methods:{
            searchCangKuList(){
                axios.get(`${ctx}/jibenxinxi/ck/search/${this.pageNo}/${this.pageSize}`,{params:this.cangKuVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },

            searchUserList(){
                axios.get(`${ctx}/renshi/user/Kglist`)
                    .then(({data})=>{
                        this.userList=data.result;
                    });
            },
            /*  toUpload(){
                this.uploadFlag=true;
            },*/
            /*   doBeforeUpload(file){
                   const reader=new FileReader();
                   reader.readAsDataURL(file);
                   reader.onloadend=()=>{
                       this.img=reader.result;
                   }
               },*/
            toUpdate(row){
                Object.assign(this.cangku,row);
                this.updateFlag=true;
            },
            update(){
             if(this.cangku.cangkuPhone.length!=11){
              return this.$Message.error('修改失败!电话号码必须为11位');
              }
                if(this.cangku.cangkuName==""){
                    return this.$Message.error('修改失败!仓库名不能为空');
                }
                if(this.cangku.cangkuAddress==""){
                    return this.$Message.error('修改失败!仓库地址不能为空');
                }
           /*     let params=Qs.stringify(this.cangku,{serializeDate:(date)=> {
                        return  moment(date).format("YYYY-MM-DD HH:mm");
                    }});*/
                axios.post(`${ctx}/jibenxinxi/ck/update`,this.cangku)
                    .then(({data})=>{
                        this.updateFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.searchCangKuList();
                    });
            },
            del(row,index){
                let _this=this;
                let flag= iview.Modal.confirm({
                    title:"您确实要删除么？",
                    content:"该操作不可逆，请谨慎操作。",
                    onOk(){
                        axios.get(`${ctx}/jibenxinxi/ck/del?id=${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                //_this.search();
                                _this.pageResult.rows.splice(index,1);
                            });
                    }
                });
            },
            toAdd(){
                this.cangku={ };
                this.addFlag=true;

            },
            add(name){
                this.$refs[name].validate((valid) => {
                        if (valid) {
                            if(this.cangku.cangkuPhone.length!=11){
                                return this.$Message.error('添加失败!电话号码必须为11位');
                            }
                           /* if(this.cangku.userId==null||this.cangku.userId==0){
                                return this.$Message.error('添加失败!请选择库管员');
                            }*/
                axios.post(`${ctx}/jibenxinxi/ck/add`,this.cangku)
                    .then(({data})=>{
                        this.addFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.$refs[name].resetFields();
                        this.searchCangKuList();

                    });
                        }else {
                            this.$Message.error('添加失败!');
                        }
                })
            },
            cancleSubmit(name){
                this.$refs[name].resetFields();
                this.addFlag=false;
            }
        },
        mounted(){
            this.searchCangKuList();
            this.searchUserList();
        },

    });
</script>
</body>
</html>
